<template>
  <div class="mybackgroud">
    <div class="centerLoading">
      <div style="text-align:center" class="textd">
        TeacherLog
      </div>

      <div class="item__content">
        <label
          ><input
            class="inputId"
            type="text"
            placeholder="userName"
            v-model="username"
            required
        /></label>
      </div>

      <div class="item__content">
        <label>
          <input
            class="inputId"
            type="text"
            placeholder="passWord"
            v-if="showPwd"
            v-model="pwd"
            required
          />

          <input
            class="inputId"
            type="password"
            placeholder="passWord"
            v-else
            v-model="pwd"
            required
          />
        </label>

        <!-- <div class="switch_button off" :class="showPwd?'on' : 'off'" @click="showPwd=!showPwd"> -->
        <!-- <div class="switch_circle" :class="{right: showPwd}"></div> -->
        <span class="switch_text" @click="showPwdway">show</span>
        <!-- </div> -->
      </div>

      <div style="padding-top: 50px;">
        <button class="buttonLogin" @click="login_t">Login</button>
      </div>
    </div>
  </div>
</template>

<script>
import { t_request } from '../network/request';
export default {
  name: "Login",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      username:"",
      showPwd: false,
      pwd: ""
    };
  },
  methods: {
    // 四条弹窗
    open1(mes) {
      this.$message(mes);
    },
    open2(mes) {
      this.$message({
        message: mes,
        type: "success"
      });
    },

    open3(mes) {
      this.$message({
        message: mes,
        type: "warning"
      });
    },

    open4(mes) {
      this.$message.error(mes);
    },
    // 显示or隐藏密码
    showPwdway() {
      this.showPwd = !this.showPwd;
    },

    login_t(){
      t_request({
        url:"/teacher/login/"+this.username+"/"+this.pwd,
        method:"get"
      }).then(res => {
        console.log(res)
        if(res.code == 200) {
          localStorage.setItem("teacherid", JSON.stringify(this.username));
          sessionStorage.setItem('teacherinfo',JSON.stringify(res.data));
          this.$router.push({ path: "/table" });
        }
        // 账号密码错误
        if (res.code == 20012) {
            // alert("User does not exist");
            this.open1("User does not exist");
          }

          // 密码错误
          if (res.code == 20011) {
            this.open4("Password error");
          }
      }).catch(err => {
        console.log(err)
      })
        
    }
  }
};
</script>

<style>
.mybackgroud {
  background-color: #2d3a4b;
  color: aliceblue;
  font-size: larger;
  font-family: "PMZD";
  width: 100vw;
  height: 100vh;
}

/* 使div块在页面居中 */
.centerLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 430px;
}

/* 登录大字 */
.textd {
  font-size: 70px;
  font-weight: lighter;
  padding-bottom: 40px;
  font-family: "PMZD";
}

/* input框 */
.item__content {
  /* 去掉边框 */
  /*border:none;*/
  border: #797979 1px solid;
  box-shadow: rgba(255, 255, 255, 0.32) 0px 0.5px 355px,
    inset rgba(255, 255, 255, 0.32) 0px 0.5px 8px;
  line-height: 40px;
  position: relative;
  font-size: 15px;
  /*border-radius: 8px;*/
  top: 10px;
  margin-bottom: 60px;
}
/*去掉选中时边框*/
input[type="text"]:focus {
  outline: none;
}

/* 输入框内字体颜色 */
input::placeholder {
  color: #797979;
}

.inputId {
  background: transparent;
  border: none;
  -webkit-appearance: none;
  border-radius: 0px;
  padding: 13px 1px 8px 11px;
  color: #fff;
  height: 40px;
  width: 80%;
  caret-color: #fff;
  outline: none;
}

/* 登录按钮 */
.buttonLogin {
  color: rgba(255, 255, 255, 0.73);
  background-color: #2d3a4b;
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow: rgba(255, 255, 255, 0.53) -2px -3px 10px;
  display: inline-block;
  border-radius: 24px;
  font-size: 10px;
  height: 51px;
  width: 105px;
  /* 按钮居中 */
  display: block;
  margin: 0 auto;
}

/* 小眼睛 */
.iconfont iconjiemao {
  width: 10px;
  height: 10px;
  color: #fff;
}
</style>
